<template>
	<view style="padding: 20rpx 40rpx;">
		<view
			style="background-color: #2D80E3;padding: 40rpx;height: 200rpx;display: flex;flex-direction: column;justify-content: space-between;border-radius: 10rpx;box-shadow: 1rpx 1rpx 20rpx #2D80E3">
			<text style="font-size: 26rpx;color: #fff;">可提现金额（元）</text>
			<view style="display: flex;flex-direction: row; align-items: baseline;">
				<text style="font-size: 22rpx;color: #fff;">￥</text>
				<text style="font-size: 38rpx;color: #fff;font-weight: bold;">{{user.balance}}</text>
			</view>
		</view>
		<view style="margin: 40rpx 0;">
			<text>提现金额</text>
		</view>
		<view
			style="display: flex;flex-direction: row; align-items: center;justify-content: space-between;padding-bottom: 10rpx;">
			<u-form :model="form" ref="uForm" :border-bottom="false" style="flex: 1;" :error-type="errorType">
				<u-form-item prop="amount" left-icon="rmb"
					:left-icon-style="{fontSize: '24rpx', marginRight: '20rpx', color: '#333'}">
					<u-input type="number" :border="false" v-model="form.amount" placeholder="请输入提现金额"
						:clearable="false" />
					<view @click="all()" slot="right" style="font-size: 24rpx;color: #333;">全部</view>
				</u-form-item>
			</u-form>
		</view>

		<view style="margin: 40rpx 0;">
			<text>打款方式</text>
		</view>
		<view style="padding-bottom: 30rpx;">
			<u-radio-group v-model="radioValue" @change="radioGroupChange">
				<u-radio @change="radioChange" v-for="(item, index) in radio" :key="index" :name="item.name"
					:disabled="item.disabled">
					{{item.name}}
				</u-radio>
			</u-radio-group>
		</view>

		<view style="display: flex;flex-direction: column;margin: 20rpx auto;padding-bottom: 60rpx;">
			<text class="zy_text" style="font-size: 30rpx;">提现规则:</text>
			<view class="zy-item">
				<view class="zy-item-num">1.</view>
				<view class="zy-item-content">提现1元起提，1元的整数倍；</view>
			</view>
			<view class="zy-item">
				<view class="zy-item-num">2.</view>
				<view class="zy-item-content">提现打款时间9:00-21:00，每天可提现3次；</view>
			</view>
			<view class="zy-item">
				<view class="zy-item-num">3.</view>
				<view class="zy-item-content">打款方式选择支付宝需要先填写支付宝账号和真实姓名；</view>
			</view>
			<view class="zy-item">
				<view class="zy-item-num">4.</view>
				<view class="zy-item-content" @click="copy('15580892099')">
					由于微信打款功能还在开通中，微信提现成功后麻烦先添加客服微信(15580892099)联系打款。</view>
			</view>
		</view>

		<u-button @click="withdrawal()" :custom-style="buttonStyle" :plain="true" :hair-line="false" shape="circle"
			hover-class="none">
			<text style="color: #fff;">立即提现</text>
		</u-button>

		<view @click="openPage('pages/center/withdrawalLog', {})"
			style="display: flex;justify-content: center;align-items: auto;width: 100%;color: #999;font-size: 24rpx;margin-top: 20rpx;">
			查看提现记录>></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				errorType: ['toast', 'message'],
				form: {
					amount: '',
					type: 1
				},
				zfbSwitchVal: false,
				wxSwitchVal: false,
				rules: {
					amount: [
						// 对name字段进行必填验证
						{
							required: true,
							message: '请填写提现金额',
							trigger: ['blur']
						},
						{
							pattern: /^[0-9]*[1-9][0-9]*$/,
							message: '提现金额必须是整数',
							trigger: ['blur']
						},
					]
				},
				buttonStyle: {
					backgroundColor: '#2D80E3',
					marginTop: "20rpx"
				},
				user: null,
				radio: [
					{
						name: '微信',
						disabled: false
					},{
						name: '支付宝',
						disabled: false
					}
				],
				radioValue: "微信"
			}
		},
		onLoad({
			user
		}) {
			let that = this;
			
			this.user = JSON.parse(user)
			
			uni.$on('updateUserInfo', function(data) {
				this.$u.api.userInfoByToken({}).then(res => {
					that.user = res
					uni.setStorageSync('user_info', JSON.stringify(res))
				})
			})
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			openPage(path, params = {}) {
				this.$u.route({
					url: path,
					params
				})
			},
			radioGroupChange(e){
				if(e == "支付宝"){
					this.form.type = 2;
				}else if(e == "微信"){
					this.form.type = 1;
				}
			},
			radioChange(e){
				if(e == "支付宝"){
					this.form.type = 2;
				}else if(e == "微信"){
					this.form.type = 1;
				}
			},
			withdrawal() {
				let that = this;

				if (this.user.mobile) {
					this.$refs.uForm.validate(valid => {
						if (valid) {
							uni.showLoading({
								title: '正在发起提现'
							})
							that.$u.api.withdrawal({
								amount: that.form.amount,
								type: that.form.type
							}).then(res => {
								uni.$emit('updateUserInfo', {
									msg: '刷新用户信息'
								})
								uni.hideLoading()
								that.$u.toast('已发起提现,等待到账信息');
							})

							// uni.requestSubscribeMessage({
							// 	tmplIds: ['zRiKHR0rpoQ89mKFGatSNunFGKjVXLOj04_977Fxfbw',
							// 		'ycV90076SWhV0hxzqZuxEqr8CMHIq8hMIOyQGeYpyCo'
							// 	],
							// 	success(res) {
							// 		console.log(res)
							// 	}
							// })
						} else {
							that.$u.toast('请填写正确合规的信息');
						}
					});
				} else {
					that.$u.toast('先绑定手机号');
					that.$u.route({
						url: '/pages/auth/bindMobile',
						params: {}
					})
				}
			},
			all() {
				this.form.amount = parseInt(this.user.balance)
			},
			copy(text) {
				let that = this;
				uni.setClipboardData({
					data: text,
					success: function() {

					}
				});
			}
		}
	}
</script>

<style>
	body {
		background-color: #fff;
	}

	.zy_text {
		color: #999;
		font-size: 28rpx;
		margin-top: 10rpx;
	}

	,
	.zy-item {
		display: flex;
		flex-direction: row;
		margin-top: 10rpx;
	}

	,
	.zy-item-num {
		color: #999;
		font-size: 28rpx;
		margin-right: 4rpx;
	}

	,
	.zy-item-content {
		color: #999;
		font-size: 28rpx;
	}
</style>
